import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Row, Col,Button,message,Card,Upload,Icon,Modal,Divider,Table,Progress,Input} from 'antd';
import './SecondContent.scss';
import { API_DOMAIN, QINIU_DOMAIN } from '../../../../utils/constants';
import * as qiniu from 'qiniu-js';
import TMTable from '../../TMTable/Table';
import API from '../../../../api/files/index';
import TokenAPI from '../../../../api/auth/index';

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }
  
  function beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJPG && isLt2M;
  }
  
class SecondContent extends Component {

    constructor (props) {
        super(props);
        const columns = [{
          title: '文件名称',
          key: 'nickname',
          dataIndex: 'nickname',
          width: '70%',
          render: (text, record) => {
               return (
                      <span>
                      {record.nickname}
                      </span>
                  );
          },
      },  {
          title: '',
          key: 'operate',
          dataIndex: 'operate',
          width: '25%',
          render: (text, record) => {
                  return (<span><a role="button" style={{color:'#1890FF'}}>下载</a>&nbsp;&nbsp;
                  <a style={{color:'#bababa'}}>|</a>
                  &nbsp;&nbsp;
                  <a role="button"  id={record.id}  style={{color:'#1890FF'}}>删除</a>
                  </span>
                  );
          },
      }
   ]
        this.state = {
             file: {},
             loading: false,
             imageUrl:'',
             imageUrl1:'',
             imageUrl2:'',
             imageUrl3:'',
             imageUrl4:'',
             uploadedFiles: [],
             uploadedFiles1: [],
             uploadedFiles2: [],
             uploadedFiles3: [],
             uploadedFiles4: [],
             value:'',
             columns,
             visibleOfVersion: false,
             visibleOfVersion1:false,
             visibleOfVersion2:false,
             visibleOfVersion3:false,
             visibleOfVersion4:false,
             dataSource:[],
        };
    }

    componentDidMount () {
      this.props.onRef(this);
    }

    handleUploadFile = async () => {
      const { uploadedFiles } = this.state;
      if (uploadedFiles.length === 0) {
        // message.warn('请先选择文件');
      } else if (uploadedFiles.length === 1) {
       var inputValue = document.getElementById("inputBox").value;
       console.log(inputValue);
       this.setState({
        visibleOfVersion: false,
       });
       var param = {};
       param.nickname = inputValue;
       param.url = this.state.uploadedFiles[0].url;
       return param;
      } else {
        message.error('只能选择一个文件');
      }
    }

    handleUploadFile1 = async () => {
      const { uploadedFiles1 } = this.state;
      if (uploadedFiles1.length === 0) {
        // message.warn('请先选择文件');
      } else if (uploadedFiles1.length === 1) {
       var inputValue = document.getElementById("inputBox1").value;
       this.setState({
        visibleOfVersion1: false,
       })
       var param = {};
       param.nickname = inputValue;
       param.url = this.state.uploadedFiles1[0].url;
       return param;
      } else {
        message.error('只能选择一个文件');
      }
    }

    handleUploadFile2 = async () => {
      const { uploadedFiles2 } = this.state;
      if (uploadedFiles2.length === 0) {
        // message.warn('请先选择文件');
      } else if (uploadedFiles2.length === 1) {
       var inputValue = document.getElementById("inputBox2").value;
       console.log(inputValue);
       this.setState({
        visibleOfVersion2: false,
       })
       var param = {};
       param.nickname = inputValue;
       param.url = this.state.uploadedFiles2[0].url;
       return param;
      } else {
        message.error('只能选择一个文件');
      }
    }


    handleUploadFile3 = async () => {
      const { uploadedFiles3 } = this.state;
      if (uploadedFiles3.length === 0) {
        // message.warn('请先选择文件');
      } else if (uploadedFiles3.length === 1) {
       var inputValue = document.getElementById("inputBox3").value;
       console.log(inputValue);
       this.setState({
        visibleOfVersion3: false,
       })
       var param = {};
       param.nickname = inputValue;
       param.url = this.state.uploadedFiles3[0].url;
       return param;
      } else {
        message.error('只能选择一个文件');
      }
    }


    handleUploadFile4 = async () => {
      const { uploadedFiles4 } = this.state;
      if (uploadedFiles4.length === 0) {
        // message.warn('请先选择文件');
      } else if (uploadedFiles4.length === 1) {
       var inputValue = document.getElementById("inputBox4").value;
       console.log(inputValue);
       this.setState({
        visibleOfVersion4: false,
        dataSource:[
          {
            nickname:this.state.uploadedFiles4[0].nickname,
            url:this.state.uploadedFiles4[0].url,
          } 
        ]
       });
       var param = {};
       param.nickname = inputValue;
       param.url = this.state.uploadedFiles4[0].url;
       return param;
      } else {
        message.error('只能选择一个文件');
      }
    }

    handleCancelUpload = () =>{
      this.setState({ 
        visibleOfVersion: false,
      });
    }

    handleCancelUpload1 = () =>{
      this.setState({ 
        visibleOfVersion1: false,
      });
    }

    handleCancelUpload2 = () =>{
      this.setState({ 
        visibleOfVersion2: false,
      });
    }


    handleCancelUpload3 = () =>{
      this.setState({ 
        visibleOfVersion3: false,
      });
    }

    handleCancelUpload4 = () =>{
      this.setState({ 
        visibleOfVersion4: false,
      });
    }
    handleUpload = async ({ file }) => {
      const response = await TokenAPI.getUploadToken();
      const { code, data } = response;
      if (code === 1) {
        const fileName = file.name.substr(0, file.name.lastIndexOf('.'));
        const fileObj = {
          nickname: fileName,
          uid: file.uid,
          url: this.state.uploadedFiles.url?this.state.uploadedFiles.url:'',
        };
        this.setState({
          uploadedFiles: [fileObj],
        });
        const token = data;
        const config = {
          useCdnDomain: true,
        };
        const putExtra = {
          fname: '',
          params: {},
          mimeType: null,
        };
        const next = async ({ total }) => {
          const { percent } = total;
          const { uploadedFiles } = this.state;
          uploadedFiles.filter((item, index) => {
            if (item.uid === file.uid) {
              const tempObj = Object.assign({}, item, { percent: parseInt(percent) });
              uploadedFiles.splice(index, 1, tempObj);
              this.setState({ uploadedFiles });
            }
          });
        };
        const complete = async (res) => {
          const url = `${QINIU_DOMAIN}/${res.key}`;
          const response = await TokenAPI.getDownloadUrl(url);
          const { code, data } = response;
          if (code === 1) {
            let uploadedFiles = this.state.uploadedFiles;
            const tempObj = uploadedFiles[uploadedFiles.length - 1];
            tempObj.url = data;
            uploadedFiles.splice(uploadedFiles.length - 1, 1, tempObj);
            this.setState({
              uploadedFiles,
              imageUrl:data,
            })
          }
        };
        const observable = qiniu.upload(file, null, token, putExtra, config);
        observable.subscribe(next, undefined, complete);
      } else {
        message.error('token获取失败');
      }
    }

    handleUpload2 = async ({ file }) => {
      const response = await TokenAPI.getUploadToken();
      const { code, data } = response;
      if (code === 1) {
        const fileName = file.name.substr(0, file.name.lastIndexOf('.'));
        const fileObj = {
          nickname: fileName,
          uid: file.uid,
          url: this.state.uploadedFiles2.url?this.state.uploadedFiles2.url:'',
        };
        this.setState({
          uploadedFiles2: [fileObj],
        });
        const token = data;
        const config = {
          useCdnDomain: true,
        };
        const putExtra = {
          fname: '',
          params: {},
          mimeType: null,
        };
        const next = async ({ total }) => {
          const { percent } = total;
          const { uploadedFiles2 } = this.state;
          uploadedFiles2.filter((item, index) => {
            if (item.uid === file.uid) {
              const tempObj = Object.assign({}, item, { percent: parseInt(percent) });
              uploadedFiles2.splice(index, 1, tempObj);
              this.setState({ uploadedFiles2 });
            }
          });
        };
        const complete = async (res) => {
          const url = `${QINIU_DOMAIN}/${res.key}`;
          const response = await TokenAPI.getDownloadUrl(url);
          const { code, data } = response;
          if (code === 1) {
            let uploadedFiles2 = this.state.uploadedFiles2;
            const tempObj = uploadedFiles2[uploadedFiles2.length - 1];
            tempObj.url = data;
            uploadedFiles2.splice(uploadedFiles2.length - 1, 1, tempObj);
            this.setState({
              uploadedFiles2,
              imageUrl2:data,
            })
          }
        };
        const observable = qiniu.upload(file, null, token, putExtra, config);
        observable.subscribe(next, undefined, complete);
      } else {
        message.error('token获取失败');
      }
    }

    handleUpload1 = async ({ file }) => {
      const response = await TokenAPI.getUploadToken();
      const { code, data } = response;
      if (code === 1) {
        const fileName = file.name.substr(0, file.name.lastIndexOf('.'));
        const fileObj = {
          nickname: fileName,
          uid: file.uid,
          url: this.state.uploadedFiles1.url?this.state.uploadedFiles1.url:'',
        };
        this.setState({
          uploadedFiles1: [fileObj],
        });
        const token = data;
        const config = {
          useCdnDomain: true,
        };
        const putExtra = {
          fname: '',
          params: {},
          mimeType: null,
        };
        const next = async ({ total }) => {
          const { percent } = total;
          const { uploadedFiles1 } = this.state;
          uploadedFiles1.filter((item, index) => {
            if (item.uid === file.uid) {
              const tempObj = Object.assign({}, item, { percent: parseInt(percent) });
              uploadedFiles1.splice(index, 1, tempObj);
              this.setState({ uploadedFiles1 });
            }
          });
        };
        const complete = async (res) => {
          const url = `${QINIU_DOMAIN}/${res.key}`;
          const response = await TokenAPI.getDownloadUrl(url);
          const { code, data } = response;
          if (code === 1) {
            let uploadedFiles1 = this.state.uploadedFiles1;
            const tempObj = uploadedFiles1[uploadedFiles1.length - 1];
            tempObj.url = data;
            uploadedFiles1.splice(uploadedFiles1.length - 1, 1, tempObj);
            this.setState({
              uploadedFiles1,
              imageUrl1:data,
            })
          }
        };
        const observable = qiniu.upload(file, null, token, putExtra, config);
        observable.subscribe(next, undefined, complete);
      } else {
        message.error('token获取失败');
      }
    }

    handleUpload3 = async ({ file }) => {
      const response = await TokenAPI.getUploadToken();
      const { code, data } = response;
      if (code === 1) {
        const fileName = file.name.substr(0, file.name.lastIndexOf('.'));
        const fileObj = {
          nickname: fileName,
          uid: file.uid,
          url: this.state.uploadedFiles3.url?this.state.uploadedFiles3.url:'',
        };
        this.setState({
          uploadedFiles3: [fileObj],
        });
        const token = data;
        const config = {
          useCdnDomain: true,
        };
        const putExtra = {
          fname: '',
          params: {},
          mimeType: null,
        };
        const next = async ({ total }) => {
          const { percent } = total;
          const { uploadedFiles3 } = this.state;
          uploadedFiles3.filter((item, index) => {
            if (item.uid === file.uid) {
              const tempObj = Object.assign({}, item, { percent: parseInt(percent) });
              uploadedFiles3.splice(index, 1, tempObj);
              this.setState({ uploadedFiles3 });
            }
          });
        };
        const complete = async (res) => {
          const url = `${QINIU_DOMAIN}/${res.key}`;
          const response = await TokenAPI.getDownloadUrl(url);
          const { code, data } = response;
          if (code === 1) {
            let uploadedFiles3 = this.state.uploadedFiles3;
            const tempObj = uploadedFiles3[uploadedFiles3.length - 1];
            tempObj.url = data;
            uploadedFiles3.splice(uploadedFiles3.length - 1, 1, tempObj);
            this.setState({
              uploadedFiles3,
              imageUrl3:data,
            })
          }
        };
        const observable = qiniu.upload(file, null, token, putExtra, config);
        observable.subscribe(next, undefined, complete);
      } else {
        message.error('token获取失败');
      }
    }

    handleUpload4 = async ({ file }) => {
      const response = await TokenAPI.getUploadToken();
      const { code, data } = response;
      if (code === 1) {
        const fileName = file.name.substr(0, file.name.lastIndexOf('.'));
        const fileObj = {
          nickname: fileName,
          uid: file.uid,
          url: this.state.uploadedFiles4.url?this.state.uploadedFiles4.url:'',
        };
        this.setState({
          uploadedFiles4: [fileObj],
        });
        const token = data;
        const config = {
          useCdnDomain: true,
        };
        const putExtra = {
          fname: '',
          params: {},
          mimeType: null,
        };
        const next = async ({ total }) => {
          const { percent } = total;
          const { uploadedFiles4 } = this.state;
          uploadedFiles4.filter((item, index) => {
            if (item.uid === file.uid) {
              const tempObj = Object.assign({}, item, { percent: parseInt(percent) });
              uploadedFiles4.splice(index, 1, tempObj);
              this.setState({ uploadedFiles4 });
            }
          });
        };
        const complete = async (res) => {
          const url = `${QINIU_DOMAIN}/${res.key}`;
          const response = await TokenAPI.getDownloadUrl(url);
          const { code, data } = response;
          if (code === 1) {
            let uploadedFiles4 = this.state.uploadedFiles4;
            const tempObj = uploadedFiles4[uploadedFiles4.length - 1];
            tempObj.url = data;
            uploadedFiles4.splice(uploadedFiles4.length - 1, 1, tempObj);
            this.setState({
              uploadedFiles4,
              imageUrl4:data,
            })
          }
        };
        const observable = qiniu.upload(file, null, token, putExtra, config);
        observable.subscribe(next, undefined, complete);
      } else {
        message.error('token获取失败');
      }
    }


      showUpload = () => {
        this.setState({
          uploadedFiles: [],
          visibleOfVersion: true,
        });
      }

      showUpload1 = () => {
        this.setState({
          uploadedFiles1: [],
          visibleOfVersion1: true,
        });
      }

      showUpload2 = () => {
        this.setState({
          uploadedFiles2: [],
          visibleOfVersion2: true,
        });
      }

      showUpload3 = () => {
        this.setState({
          uploadedFiles3: [],
          visibleOfVersion3: true,
        });
      }

      showUpload4 = () => {
        this.setState({
          uploadedFiles4: [],
          visibleOfVersion4: true,
        });
      }

      finishUpload = ({ file }) => {
        const { status } = file.status;
        if (status === 'done') {
          this.state.uploadedFiles.filter((item, index) => {
            if (item.uid === file.uid) {
              item.percent = 100;
            }
          });
        }
      }

      finishUpload1 = ({ file }) => {
        const { status } = file.status;
        if (status === 'done') {
          this.state.uploadedFiles1.filter((item, index) => {
            if (item.uid === file.uid) {
              item.percent = 100;
            }
          });
        }
      }
      finishUpload2 = ({ file }) => {
        const { status } = file.status;
        if (status === 'done') {
          this.state.uploadedFiles2.filter((item, index) => {
            if (item.uid === file.uid) {
              item.percent = 100;
            }
          });
        }
      }

      finishUpload3 = ({ file }) => {
        const { status } = file.status;
        if (status === 'done') {
          this.state.uploadedFiles3.filter((item, index) => {
            if (item.uid === file.uid) {
              item.percent = 100;
            }
          });
        }
      }

      finishUpload4 = ({ file }) => {
        const { status } = file.status;
        if (status === 'done') {
          this.state.uploadedFiles4.filter((item, index) => {
            if (item.uid === file.uid) {
              item.percent = 100;
            }
          });
        }
      }

      handleChange(event) {
        this.setState({
          value: event.target.value,
        });
      }

    render () {
      const uploadedVersionsColumns = [{
        title: '文件名称',
        dataIndex: 'nickname',
        key: 'nickname',
      }, {
        title: '传输进度',
        dataIndex: 'percent',
        key: 'percent',
        render: (text, record) => (<Progress percent={record.percent} />),
      }, {
        title: '',
        dataIndex: 'operation',
        render: (text, record, index) =>
          (
           <input type="text" id="inputBox" placeholder="证件名称"/>
          )
      }];

      const uploadedVersionsColumns1 = [{
        title: '文件名称',
        dataIndex: 'nickname',
        key: 'nickname',
      }, {
        title: '传输进度',
        dataIndex: 'percent',
        key: 'percent',
        render: (text, record) => (<Progress percent={record.percent} />),
      }, {
        title: '',
        dataIndex: 'operation',
        render: (text, record, index) =>
          (
           <input type="text" id="inputBox1" placeholder="证件名称"/>
          )
      }];

      const uploadedVersionsColumns2 = [{
        title: '文件名称',
        dataIndex: 'nickname',
        key: 'nickname',
      }, {
        title: '传输进度',
        dataIndex: 'percent',
        key: 'percent',
        render: (text, record) => (<Progress percent={record.percent} />),
      }, {
        title: '',
        dataIndex: 'operation',
        render: (text, record, index) =>
          (
           <input type="text" id="inputBox2" placeholder="证件名称"/>
          )
      }];

      const uploadedVersionsColumns3 = [{
        title: '文件名称',
        dataIndex: 'nickname',
        key: 'nickname',
      }, {
        title: '传输进度',
        dataIndex: 'percent',
        key: 'percent',
        render: (text, record) => (<Progress percent={record.percent} />),
      }, {
        title: '',
        dataIndex: 'operation',
        render: (text, record, index) =>
          (
           <input type="text" id="inputBox3" placeholder="证件名称"/>
          )
      }];

      const uploadedVersionsColumns4 = [{
        title: '文件名称',
        dataIndex: 'nickname',
        key: 'nickname',
      }, {
        title: '传输进度',
        dataIndex: 'percent',
        key: 'percent',
        render: (text, record) => (<Progress percent={record.percent} />),
      }, {
        title: '',
        dataIndex: 'operation',
        render: (text, record, index) =>
          (
           <input type="text" id="inputBox4" placeholder="证件名称"/>
          )
      }];
       var screenHeight = document.body.clientHeight;
        const uploadButton1 = (
            <div onClick={this.showUpload}>
              <Icon type={this.state.loading ? 'loading' : 'plus'} />
              <span className="ant-upload-text">身份证正面</span>
            </div>
          );
          const uploadButton2 = (
            <div onClick={this.showUpload1}>
              <Icon type={this.state.loading ? 'loading' : 'plus'} />
              <span className="ant-upload-text">身份证反面</span>
            </div>
          );
          const uploadButton3 = (
            <div onClick={this.showUpload2}>
              <Icon type={this.state.loading ? 'loading' : 'plus'} />
              <span className="ant-upload-text">上传证件</span>
            </div>
          );
          const uploadButton4 = (
            <div onClick={this.showUpload4}>
              <Icon type={this.state.loading ? 'loading' : 'plus'} />
              <span className="ant-upload-text">上传文件</span>
            </div>
          );
          const uploadButton5 = (
            <div onClick={this.showUpload3}>
              <Icon type={this.state.loading ? 'loading' : 'plus'} />
              <span className="ant-upload-text">上传营业执照</span>
            </div>
          );
          const imageUrl = this.state.imageUrl;
          const imageUrl1 = this.state.imageUrl1;
          const imageUrl2 = this.state.imageUrl2;
          const imageUrl3 = this.state.imageUrl3;
        return (
        <div style={{overflowY:'scroll',maxHeight: screenHeight-340}}>
         <Modal
          width={800}
          title="上传证件"
          visible={this.state.visibleOfVersion}
          okText="确认"
          cancelText="取消"
          onOk={this.handleUploadFile}
          onCancel={this.handleCancelUpload}
        >
          <Row>
            <Upload
              accept=".jpg,.jpeg,.png"
              showUploadList={false}
              customRequest={this.handleUpload}
              onChange={this.finishUpload}
            >
              <Button>本地上传</Button>
            </Upload>
          </Row>
          <Divider />
          <Table rowKey="uid" pagination={false} dataSource={this.state.uploadedFiles} columns={uploadedVersionsColumns} />
        </Modal>
        <Modal
          width={800}
          title="上传证件"
          visible={this.state.visibleOfVersion1}
          okText="确认"
          cancelText="取消"
          onOk={this.handleUploadFile1}
          onCancel={this.handleCancelUpload1}
        >
          <Row>
            <Upload
              accept=".jpg,.jpeg,.png"
              showUploadList={false}
              customRequest={this.handleUpload1}
              onChange={this.finishUpload1}
            >
              <Button>本地上传</Button>
            </Upload>
          </Row>
          <Divider />
          <Table rowKey="uid" pagination={false} dataSource={this.state.uploadedFiles1} columns={uploadedVersionsColumns1} />
        </Modal>

          <Modal
          width={800}
          title="上传证件"
          visible={this.state.visibleOfVersion2}
          okText="确认"
          cancelText="取消"
          onOk={this.handleUploadFile2}
          onCancel={this.handleCancelUpload2}
        >
          <Row>
            <Upload
              accept=".jpg,.jpeg,.png"
              showUploadList={false}
              customRequest={this.handleUpload2}
              onChange={this.finishUpload2}
            >
              <Button>本地上传</Button>
            </Upload>
          </Row>
          <Divider />
          <Table rowKey="uid" pagination={false} dataSource={this.state.uploadedFiles2} columns={uploadedVersionsColumns2} />
        </Modal>

          <Modal
          width={800}
          title="上传证件"
          visible={this.state.visibleOfVersion3}
          okText="确认"
          cancelText="取消"
          onOk={this.handleUploadFile3}
          onCancel={this.handleCancelUpload3}
        >
          <Row>
            <Upload
              accept=".jpg,.jpeg,.png"
              showUploadList={false}
              customRequest={this.handleUpload3}
              onChange={this.finishUpload3}
            >
              <Button>本地上传</Button>
            </Upload>
          </Row>
          <Divider />
          <Table rowKey="uid" pagination={false} dataSource={this.state.uploadedFiles3} columns={uploadedVersionsColumns3} />
        </Modal>

         <Modal
          width={800}
          title="上传证件"
          visible={this.state.visibleOfVersion4}
          okText="确认"
          cancelText="取消"
          onOk={this.handleUploadFile4}
          onCancel={this.handleCancelUpload4}
        >
          <Row>
            <Upload
              accept=".pdf"
              showUploadList={false}
              customRequest={this.handleUpload4}
              onChange={this.finishUpload4}
            >
              <Button>本地上传</Button>
            </Upload>
          </Row>
          <Divider />
          <Table rowKey="uid" pagination={false} dataSource={this.state.uploadedFiles4} columns={uploadedVersionsColumns4} />
        </Modal>

        <div style={{background:'#eceff3',height:10}}></div>
        <div style={{ background: '#fff', padding: '5px 30px'}}>
        <Card title="工商信息" bordered={false} style={{textAlign:'left'}} className="ImgUpload">
        <div style={{marginBottom:20}}>法人身份证</div>
          <Row>
            <Col span={10}>
            <div className="ant-upload ant-upload-select ant-upload-select-picture-card">
            <span className="ant-upload" role="button">
            <input type="file" accept="" style={{display: 'none'}}/>
            {imageUrl ? <img style={{height:184}} src={imageUrl} alt="" /> : uploadButton1}
            </span>
            </div>
            </Col>
            <Col span={10}>
            <div className="ant-upload ant-upload-select ant-upload-select-picture-card">
              <span className="ant-upload" role="button">
                <input type="file" accept="" style={{display: 'none'}}/>
                {imageUrl1 ? <img style={{height:184}} src={imageUrl1} alt="" /> : uploadButton2}
              </span>
            </div>
            </Col>
        </Row>
        <div style={{marginBottom:20,marginTop:10}}>营业执照</div>
        <Row>
            <Col span={10}>
            <div className="ant-upload ant-upload-select ant-upload-select-picture-card">
              <span className="ant-upload" role="button">
                <input type="file" accept="" style={{display: 'none'}}/>
                {imageUrl2 ? <img style={{height:184}} src={imageUrl2} alt="" /> : uploadButton3}
              </span>
            </div>
            </Col>
            <Col span={10}>
            <div className="ant-upload ant-upload-select ant-upload-select-picture-card">
              <span className="ant-upload" role="button">
                <input type="file" accept="" style={{display: 'none'}}/>
                {imageUrl3 ? <img style={{height:184}} src={imageUrl3} alt="" /> : uploadButton5}
              </span>
            </div>
            </Col>
        </Row>
       </Card>
       </div>

        <div style={{background:'#eceff3',height:10}}></div>
        <div style={{ background: '#fff', padding: '5px 30px'}}>
        <Card title="协议文件" bordered={false} style={{textAlign:'left'}}>
        <TMTable scroll={{y:screenHeight-582}}  columns={this.state.columns} dataSource={this.state.dataSource} />
           <Row className="fileUpload">
           <div className="ant-upload ant-upload-select ant-upload-select-picture-card">
              <span className="ant-upload" role="button">
              <input type="file" accept="" style={{display: 'none'}}/>
                {uploadButton4}
              </span>
            </div>
          </Row>
       </Card>
       </div>
    </div>
          );
    }
}

export default SecondContent;